<script src="@/js/more/car.js"></script>

<template>
    <div class="car" id="app">
        <div class="margins">


            <!-- ★ 导航 ★ -->
            <div class="navigations">

                <!-- 1、顶部左侧导航 -->
                <div class="leftNavigations">
                    <Breadcrumb separator=">">
                        <span v-for="item in topLeftNavigations" :key="item">
                            <BreadcrumbItem :to="item.link">
                                <Icon :type="item.icon" />
                                {{ item.title }}
                            </BreadcrumbItem>
                        </span>
                    </Breadcrumb>
                </div>

                <!-- 2、顶部右侧导航 -->
                <!-- <div class="rightNavigations">
                    更多工具：
                    <span v-for="item in topRightNavigations" :key="item" class="spacing">
                        <router-link :to="item.link">
                            {{ item.title }}
                            <Icon :type="item.icon" />
                        </router-link>
                    </span>
                    <span class="r"></span>
                </div> -->

                <div class="divider"><el-divider /></div>

            </div>


            <!-- <div style="height:750px;">
                <Calendar v-model="nowDate2" hide-type @on-change="textMethod1" style="width:50%; float:left;">
                    <template #month="{ date, data }">
                        <div>
                            <Badge status="warning" text="看苹果发布会" v-if="data.day === '2019-09-11'" />
                            <Badge status="success" text="中秋节" v-if="data.day === '2019-09-13'" />
                            <Badge status="error" text="国庆节" v-if="data.day === '2019-10-01'" />
                        </div>
                    </template>
                </Calendar>
                <div style="text-align: center; font-size: 18px;">
                    <b>{{ nowDate }}</b>
                </div>
            </div> -->


            <!-- ★ 选项 ★ -->
            <div class="data" v-if="!dataStatus">

                <Row>

                    <!-- 1、示例数据 -->
                    <Col span="16">
                    <el-card shadow="never" class="jd-card">

                        <div class="title">
                            择日择吉是中国传统民俗，民俗的东西没有理由，只有传统经验；这些择吉择号运用得当确实能给人以吉祥平安。但是总的来说，这些传统经验并不是凭空而来，大多为易经哲学思维的衍生变化。择吉和吉祥物品使用一样，这是中国传统吉祥文化的表现形式之一。
                            <br />
                            择日择吉就是选好的天时。购车提车是一个人生中非常重要的大事，汽车相当于古代的驿马、金舆或轿子，是人们提升生活品质的一种追求。提车日的选择属传统民俗“择日择吉”的范畴，基本要遵循车主五行与车辆的品牌、造型、颜色、产地、车牌号等相匹配的原则。
                        </div>
                        <div class="content">
                            <div>
                                <Icon type="md-arrow-dropright-circle" />
                                购车择吉择日一般采取以下几种通用方法：
                            </div>
                            <div class="mt-10">
                                <Tag size="large" color="default">1、首先，要排除所有忌日，选择当天为黄道吉日。</Tag>
                            </div>
                            <div class="mt-10">
                                <Tag size="large" color="default">2、其次，当天干支不与车主生肖相冲、相害、相破、相刑等。</Tag>
                            </div>
                            <div class="mt-10">
                                <Tag size="large" color="default">3、第三，要避开岁破日、五不归日、杨公忌日等日子。</Tag>
                            </div>
                            <div class="mt-10">
                                <Tag size="large" color="default">4、第四，在选择好吉日的基础上，还要选择好吉时动身。</Tag>
                            </div>
                            <div class="mt-10">
                                <Tag size="large" color="default">5、第五，当日天气不宜下雨，晴朗的天气最佳。</Tag>
                            </div>
                            <div class="mt-10">
                                <Tag size="large" color="default">6、第六，根据车主的命理民俗学和堪舆方位学，提车地与驶出方向也要选择在车主幸运的方位为佳。</Tag>
                            </div>
                        </div>
                    </el-card>
                    </Col>

                    <!-- 2、选项 -->
                    <Col span="8">
                    <el-card shadow="never" class="xx-card">

                        <template #header>
                            <div class="header">
                                购车择吉
                            </div>
                        </template>

                        <div>

                            <div class="nowDate">
                                <Tag size="large" class="tag">
                                    <b>当前公历：</b>{{ year + '年' + month + '月' + day + '日' + hour + '时' + minute + '分' +
                                        second + '秒'
                                    }}
                                </Tag>
                                <Tag size="large" class="tag mt">
                                    <b>当前农历：</b>{{ nowLunarStr }}
                                </Tag>
                            </div>

                            <div class="dateType">
                                <el-segmented class="segmented" v-model="dateTypeStr" :options="dateTypeOptions" />
                            </div>

                            <div class="sex">
                                <el-segmented class="segmented" v-model="sexStr" :options="sexOptions" />
                            </div>

                            <div class="date">
                                <span class="tit">出生<b>{{ dateTypeStr }}</b>日期：</span>
                                <el-date-picker :clearable="false" v-model="date" type="datetime"
                                    format="YYYY-MM-DD HH:mm:ss" placeholder="请选择日期" :editable="false"
                                    style="width:50%;" />
                                <Checkbox v-model="isLeapMonth" :disabled="!isLeapMonthStatus" class="leapMonth">
                                    闰月
                                </Checkbox>
                            </div>

                            <div class="gouCheYear">
                                <span class="tit">期望购车年份：</span>
                                <el-input maxlength="4" show-word-limit v-model.number="gouCheYear"
                                    placeholder="请输入期望购车年份" oninput="value=value.replace(/^\.+|[^\d.]/g,'')"
                                    @blur="gouCheYearMethod" style="width:32%;"></el-input>
                                <span class="tit2">年（公历）</span>

                                <el-tooltip placement="top" :enterable="false">
                                    <template #content>
                                        <div>
                                            根据 <b><u>出生日期</u></b> 综合计算这一年之内的提车吉日忌日等信息
                                        </div>
                                    </template>
                                    <Icon type="md-help-circle" class="tip" />
                                </el-tooltip>
                            </div>

                            <div class="moreOptions">
                                <Button shape="circle" size="small" @click="moreOptionsModal = true">
                                    <Icon type="ios-settings" />
                                    更多选项
                                </Button>
                            </div>

                            <div class="starts">
                                <Button :loading="!startsButton" style="width: 100%" class="button"
                                    @click="startsMethod">
                                    <span v-if="startsButton">
                                        开始择吉
                                    </span>
                                    <span v-else>
                                        择吉中...
                                    </span>
                                </Button>

                            </div>


                        </div>

                    </el-card>
                    </Col>

                </Row>

            </div>

            <!-- ★ 数据 ★ -->
            <div class="data2" v-if="dataStatus">

                <div class="return" @click="dataStatus = false">
                    返回
                </div>

                <div class="da1">
                    <Row class="row1">
                        <Col span="8">
                        <span class="title">公历</span>
                        <span>{{ data.solarStr }}</span>
                        </Col>
                        <Col span="8">
                        <span class="title">农历</span>
                        <span>{{ data.lunarStr }}</span>
                        </Col>
                        <Col span="8">
                        <span class="title">期望购车年份</span>
                        <span>公历{{ gouCheYear }}年</span>
                        </Col>
                    </Row>

                    <Row class="row2">
                        <Col span="8">
                        <span class="title">喜用神</span>
                        <span>{{ data.xiYongShen.join('，') }}</span>
                        </Col>
                        <Col span="8">
                        <span class="title">喜用神方位</span>
                        <span>{{ data.xiYongShenFangWei.join('，') }}</span>
                        </Col>
                        <Col span="8">
                        <span class="title">生肖</span>
                        <span>{{ data.zodiac }}</span>
                        </Col>
                    </Row>
                </div>

                <div class="da2">

                    <div class="tit">汽车颜色选择参考</div>

                    <div class="cou1">
                        <Tag color="warning">按生肖</Tag>
                        <Tag color="green">常用</Tag>
                        <span class="ss">
                            {{ data.jiLiYanSeShengXiao }}
                        </span>
                    </div>

                    <div class="cou1">
                        <Tag color="warning">按年命纳音五行</Tag>
                        <Tag color="red">弃用</Tag>
                        <span class="ss">
                            <del>{{ data.jiLiYanSeNianMingNaYinWuXing }}</del>
                        </span>
                    </div>

                    <div class="cou1">
                        <Tag color="warning">按喜用神</Tag>
                        <Tag color="red">弃用</Tag>
                        <span class="ss">
                            <del>{{ data.jiLiYanSeXiYongShen }}</del>
                        </span>
                    </div>

                </div>

                <div class="da3">

                    <div class="tit">部分提车忌讳日参考</div>

                    <div class="cou1">
                        <div class="hea">
                            <Tag color="warning" size="medium">生肖相冲日</Tag>
                        </div>
                        <div class="ss">
                            <span v-for="index in data.shengXiaoXiangChongRi.length" :key="index">
                                <el-tooltip class="box-item" effect="light" placement="top-start" show-after="80"
                                    :enterable="false">
                                    <template #content>
                                        公历{{ data.shengXiaoXiangChongRi[index - 1][0] }}&nbsp;&nbsp;农历{{
                                            data.shengXiaoXiangChongRi[index - 1][1] }}（{{
                                            data.shengXiaoXiangChongRi[index - 1][2] }}）
                                    </template>
                                    <Tag color="#63abf7" checkable class="tag">
                                        {{ data.shengXiaoXiangChongRi[index - 1][0] }}
                                    </Tag>
                                </el-tooltip>
                            </span>
                        </div>
                    </div>

                    <div class="cou1">
                        <div class="hea">
                            <Tag color="warning" size="medium">日支相邢日</Tag>
                        </div>
                        <div class="ss">
                            <span v-for="index in data.riZhiXiangXingRi.length" :key="index">
                                <el-tooltip class="box-item" effect="light" placement="top-start" show-after="80"
                                    :enterable="false">
                                    <template #content>
                                        公历{{ data.riZhiXiangXingRi[index - 1][0] }}&nbsp;&nbsp;农历{{
                                            data.riZhiXiangXingRi[index - 1][1] }}（{{ data.riZhiXiangXingRi[index -
                                            1][2] }}）
                                    </template>
                                    <Tag color="#63abf7" checkable class="tag">{{ data.riZhiXiangXingRi[index - 1][0] }}
                                    </Tag>
                                </el-tooltip>
                            </span>
                        </div>
                    </div>

                    <div class="cou1">
                        <div class="hea">
                            <Tag color="warning" size="medium">日支相冲日</Tag>
                        </div>
                        <div class="ss">
                            <span v-for="index in data.riZhiXiangChongRi.length" :key="index">
                                <el-tooltip class="box-item" effect="light" placement="top-start" show-after="80"
                                    :enterable="false">
                                    <template #content>
                                        公历{{ data.riZhiXiangChongRi[index - 1][0] }}&nbsp;&nbsp;农历{{
                                            data.riZhiXiangChongRi[index - 1][1] }}（{{ data.riZhiXiangChongRi[index -
                                            1][2] }}）
                                    </template>
                                    <Tag color="#63abf7" checkable class="tag">{{ data.riZhiXiangChongRi[index - 1][0]
                                        }}</Tag>
                                </el-tooltip>
                            </span>
                        </div>
                    </div>

                    <div class="cou1">
                        <div class="hea">
                            <Tag color="warning" size="medium">日支相破日</Tag>
                        </div>
                        <div class="ss">
                            <span v-for="index in data.riZhiXiangPoRi.length" :key="index">
                                <el-tooltip class="box-item" effect="light" placement="top-start" show-after="80"
                                    :enterable="false">
                                    <template #content>
                                        公历{{ data.riZhiXiangPoRi[index - 1][0] }}&nbsp;&nbsp;农历{{
                                            data.riZhiXiangPoRi[index - 1][1] }}（{{ data.riZhiXiangPoRi[index - 1][2]
                                        }}）
                                    </template>
                                    <Tag color="#63abf7" checkable class="tag">{{ data.riZhiXiangPoRi[index - 1][0] }}
                                    </Tag>
                                </el-tooltip>
                            </span>
                        </div>
                    </div>

                    <div class="cou1">
                        <div class="hea">
                            <Tag color="warning" size="medium">日支相害日</Tag>
                        </div>
                        <div class="ss">
                            <span v-for="index in data.riZhiXiangHaiRi.length" :key="index">
                                <el-tooltip class="box-item" effect="light" placement="top-start" show-after="80"
                                    :enterable="false">
                                    <template #content>
                                        公历{{ data.riZhiXiangHaiRi[index - 1][0] }}&nbsp;&nbsp;农历{{
                                            data.riZhiXiangHaiRi[index - 1][1] }}（{{ data.riZhiXiangHaiRi[index - 1][2]
                                        }}）
                                    </template>
                                    <Tag color="#63abf7" checkable class="tag">{{ data.riZhiXiangHaiRi[index - 1][0] }}
                                    </Tag>
                                </el-tooltip>
                            </span>
                        </div>
                    </div>

                    <div class="cou1">
                        <div class="hea">
                            <Tag color="warning" size="medium">日支五行相克日</Tag>
                        </div>
                        <div class="ss">
                            <span v-for="index in data.riZhiWuXingXiangKeRi.length" :key="index">
                                <el-tooltip class="box-item" effect="light" placement="top-start" show-after="80"
                                    :enterable="false">
                                    <template #content>
                                        公历{{ data.riZhiWuXingXiangKeRi[index - 1][0] }}&nbsp;&nbsp;农历{{
                                            data.riZhiWuXingXiangKeRi[index - 1][1] }}（{{
                                            data.riZhiWuXingXiangKeRi[index - 1][2]
                                        }}）
                                    </template>
                                    <Tag color="#63abf7" checkable class="tag">{{ data.riZhiWuXingXiangKeRi[index -
                                        1][0] }}</Tag>
                                </el-tooltip>
                            </span>
                        </div>
                    </div>

                    <div class="cou1">
                        <div class="hea">
                            <Tag color="warning" size="medium">归忌日</Tag>
                        </div>
                        <div class="ss">
                            <span v-for="index in data.guiJiRi.length" :key="index">
                                <el-tooltip class="box-item" effect="light" placement="top-start" show-after="80"
                                    :enterable="false">
                                    <template #content>
                                        公历{{ data.guiJiRi[index - 1][0] }}&nbsp;&nbsp;农历{{
                                            data.guiJiRi[index - 1][1] }}（{{ data.guiJiRi[index - 1][2]
                                        }}）
                                    </template>
                                    <Tag color="#63abf7" checkable class="tag">{{ data.guiJiRi[index - 1][0] }}</Tag>
                                </el-tooltip>
                            </span>
                        </div>
                    </div>

                    <div class="cou1">
                        <div class="hea">
                            <Tag color="warning" size="medium">五鬼日</Tag>
                        </div>
                        <div class="ss">
                            <span v-for="index in data.wuGuiRi.length" :key="index">
                                <el-tooltip class="box-item" effect="light" placement="top-start" show-after="80"
                                    :enterable="false">
                                    <template #content>
                                        公历{{ data.wuGuiRi[index - 1][0] }}&nbsp;&nbsp;农历{{
                                            data.wuGuiRi[index - 1][1] }}（{{ data.wuGuiRi[index - 1][2]
                                        }}）
                                    </template>
                                    <Tag color="#63abf7" checkable class="tag">{{ data.wuGuiRi[index - 1][0] }}</Tag>
                                </el-tooltip>
                            </span>
                        </div>
                    </div>

                    <div class="cou1">
                        <div class="hea">
                            <Tag color="warning" size="medium">往亡日</Tag>
                        </div>
                        <div class="ss">
                            <span v-for="index in data.wangWangRi.length" :key="index">
                                <el-tooltip class="box-item" effect="light" placement="top-start" show-after="80"
                                    :enterable="false">
                                    <template #content>
                                        公历{{ data.wangWangRi[index - 1][0] }}&nbsp;&nbsp;农历{{
                                            data.wangWangRi[index - 1][1] }}（{{ data.wangWangRi[index - 1][2]
                                        }}）
                                    </template>
                                    <Tag color="#63abf7" checkable class="tag">{{ data.wangWangRi[index - 1][0] }}</Tag>
                                </el-tooltip>
                            </span>
                        </div>
                    </div>

                    <div class="cou1">
                        <div class="hea">
                            <Tag color="warning" size="medium">九空日</Tag>
                        </div>
                        <div class="ss">
                            <span v-for="index in data.jiuKongRi.length" :key="index">
                                <el-tooltip class="box-item" effect="light" placement="top-start" show-after="80"
                                    :enterable="false">
                                    <template #content>
                                        公历{{ data.jiuKongRi[index - 1][0] }}&nbsp;&nbsp;农历{{
                                            data.jiuKongRi[index - 1][1] }}（{{ data.jiuKongRi[index - 1][2]
                                        }}）
                                    </template>
                                    <Tag color="#63abf7" checkable class="tag">{{ data.jiuKongRi[index - 1][0] }}</Tag>
                                </el-tooltip>
                            </span>
                        </div>
                    </div>

                    <div class="cou1">
                        <div class="hea">
                            <Tag color="warning" size="medium">丧车日</Tag>
                        </div>
                        <div class="ss">
                            <span v-for="index in data.sangCheRi.length" :key="index">
                                <el-tooltip class="box-item" effect="light" placement="top-start" show-after="80"
                                    :enterable="false">
                                    <template #content>
                                        公历{{ data.sangCheRi[index - 1][0] }}&nbsp;&nbsp;农历{{
                                            data.sangCheRi[index - 1][1] }}（{{ data.sangCheRi[index - 1][2]
                                        }}）
                                    </template>
                                    <Tag color="#63abf7" checkable class="tag">{{ data.sangCheRi[index - 1][0] }}</Tag>
                                </el-tooltip>
                            </span>
                        </div>
                    </div>

                    <div class="cou1">
                        <div class="hea">
                            <Tag color="warning" size="medium">九丑日</Tag>
                        </div>
                        <div class="ss">
                            <span v-for="index in data.jiuChouRi.length" :key="index">
                                <el-tooltip class="box-item" effect="light" placement="top-start" show-after="80"
                                    :enterable="false">
                                    <template #content>
                                        公历{{ data.jiuChouRi[index - 1][0] }}&nbsp;&nbsp;农历{{
                                            data.jiuChouRi[index - 1][1] }}（{{ data.jiuChouRi[index - 1][2]
                                        }}）
                                    </template>
                                    <Tag color="#63abf7" checkable class="tag">{{ data.jiuChouRi[index - 1][0] }}</Tag>
                                </el-tooltip>
                            </span>
                        </div>
                    </div>

                    <div class="cou1">
                        <div class="hea">
                            <Tag color="warning" size="medium">五不归日</Tag>
                        </div>
                        <div class="ss">
                            <span v-for="index in data.wuBuGuiRi.length" :key="index">
                                <el-tooltip class="box-item" effect="light" placement="top-start" show-after="80"
                                    :enterable="false">
                                    <template #content>
                                        公历{{ data.wuBuGuiRi[index - 1][0] }}&nbsp;&nbsp;农历{{
                                            data.wuBuGuiRi[index - 1][1] }}（{{ data.wuBuGuiRi[index - 1][2]
                                        }}）
                                    </template>
                                    <Tag color="#63abf7" checkable class="tag">{{ data.wuBuGuiRi[index - 1][0] }}</Tag>
                                </el-tooltip>
                            </span>
                        </div>
                    </div>

                    <div class="cou1">
                        <div class="hea">
                            <Tag color="warning" size="medium">杨公忌日</Tag>
                        </div>
                        <div class="ss">
                            <span v-for="index in data.yangGongJiRi.length" :key="index">
                                <el-tooltip class="box-item" effect="light" placement="top-start" show-after="80"
                                    :enterable="false">
                                    <template #content>
                                        公历{{ data.yangGongJiRi[index - 1][0] }}&nbsp;&nbsp;农历{{
                                            data.yangGongJiRi[index - 1][1] }}（{{ data.yangGongJiRi[index - 1][2]
                                        }}）
                                    </template>
                                    <Tag color="#63abf7" checkable class="tag">{{ data.yangGongJiRi[index - 1][0] }}
                                    </Tag>
                                </el-tooltip>
                            </span>
                        </div>
                    </div>

                </div>

            </div>

            <!-- ********************************************************************************************************************* -->

            <!-- 更多选项弹窗 -->
            <Modal v-model="moreOptionsModal" class="moreOptionsModal" :styles="{ top: '30px', minWidth: '550px' }">

                <template #header>
                    <b class="header">
                        <Icon type="ios-settings" />
                        更多选项
                    </b>
                </template>

                <div>
                    年柱（年干支）排法：
                    <Select transfer v-model="yearGanZhiSet" class="select">
                        <template #prefix>
                            <span class="prefix">
                                <Icon type="ios-cube-outline" />
                            </span>
                        </template>
                        <Option v-for="item in yearGanZhiSetOptions" :key="item" :label="item.label"
                            :value="item.value">
                            {{ item.label }}
                            <span v-if="item.value === 1" style="float:right; color:#8492a6; font-size:12px;">
                                <Icon type="md-arrow-dropleft-circle" />
                                默认
                            </span>
                        </Option>
                    </Select>
                    <span v-if="yearGanZhiSet !== 1" class="fmr">
                        <Icon type="md-arrow-dropleft-circle" />
                        非默认
                    </span>
                </div>

                <div class="mt">
                    月柱（月干支）排法：
                    <Select transfer v-model="monthGanZhiSet" class="select">
                        <template #prefix>
                            <span class="prefix">
                                <Icon type="ios-cube-outline" />
                            </span>
                        </template>
                        <Option v-for="item in monthGanZhiSetOptions" :key="item" :label="item.label"
                            :value="item.value">
                            {{ item.label }}
                            <span v-if="item.value === 1" style="float:right; color:#8492a6; font-size:12px;">
                                <Icon type="md-arrow-dropleft-circle" />
                                默认
                            </span>
                        </Option>
                    </Select>
                    <span v-if="monthGanZhiSet !== 1" class="fmr">
                        <Icon type="md-arrow-dropleft-circle" />
                        非默认
                    </span>
                </div>

                <div class="mt">
                    日柱（日干支）排法：
                    <Select transfer v-model="dayGanZhiSet" class="select">
                        <template #prefix>
                            <span class="prefix">
                                <Icon type="ios-cube-outline" />
                            </span>
                        </template>
                        <Option v-for="item in dayGanZhiSetOptions" :key="item" :label="item.label" :value="item.value">
                            {{ item.label }}
                            <span v-if="item.value === 0" style="float:right; color:#8492a6; font-size:12px;">
                                <Icon type="md-arrow-dropleft-circle" />
                                默认
                            </span>
                        </Option>
                    </Select>
                    <span v-if="dayGanZhiSet !== 0" class="fmr">
                        <Icon type="md-arrow-dropleft-circle" />
                        非默认
                    </span>
                </div>

                <div class="mt">
                    时柱（时干支）排法：
                    <Select transfer v-model="hourGanZhiSet" class="select">
                        <template #prefix>
                            <span class="prefix">
                                <Icon type="ios-cube-outline" />
                            </span>
                        </template>
                        <Option v-for="item in hourGanZhiSetOptions" :key="item" :label="item.label"
                            :value="item.value">
                            {{ item.label }}
                            <span v-if="item.value === 0" style="float:right; color:#8492a6; font-size:12px;">
                                <Icon type="md-arrow-dropleft-circle" />
                                默认
                            </span>
                        </Option>
                    </Select>
                    <span v-if="hourGanZhiSet !== 0" class="fmr">
                        <Icon type="md-arrow-dropleft-circle" />
                        非默认
                    </span>
                </div>

                <template #footer>
                    <Button long @click="moreOptionsModal = false" class="footer">确认</Button>
                </template>

            </Modal>

            <div class="demo-spin-container" v-if="dataLoadingStatus">
                <Spin fix size="large"></Spin>
            </div>

        </div>
    </div>
</template>

<style scoped lang="scss" src="@/css/more/car.scss"></style>

<style lang="scss">
/* 1、更多选项弹窗 */
.moreOptionsModal {
    .header {
        font-size: 16px;
    }

    // 四柱选项

    .mt {
        margin-top: 15px;
    }

    .select {
        width: 53%;

        .prefix {
            margin: 0 8px 0 5px;
            vertical-align: -3px;
        }
    }

    .fmr {
        font-size: 12px;
        margin-left: 10px;
        color: #969696;
    }

    .footer {
        border-radius: 5px;
        background-color: rgb(249, 249, 249);
    }

}
</style>